<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Forms:  Upload Filter</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="ArjoGod, Shauna Merritt">
<META NAME="section" CONTENT="Forms">
<META NAME="description" CONTENT="Allowing visitors to upload files through web forms on your site is useful, but how do you limit the types of files they can upload?  This script only allows visitors to upload files that end with the file extensions you want, such as .gif and .jpg, etc.  Easy!">

<SCRIPT LANGUAGE="JavaScript">
<!-- Original:  ArjoGod, Shauna Merritt -->
<!-- Modified By:  Ronnie T. Moore, Editor -->




<!-- Begin
extArray = new Array(".gif", ".jpg", ".png");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) alert('Your form would have been submitted, but this is just a demo.');
else
alert("Please only upload files that end in types:  " 
+ (extArray.join("  ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
//  End -->
</script>
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width=600 cellpadding=0 cellspacing=10>
<tr>
<td width=468 align=center>

    
    
</td>
<td width=120 align=center>
    
</td>
</tr>
</table>
<BR>
<BR>
<basefont size=3>
<FONT SIZE="+2" FACE="Helvetica,Arial">
<A HREF="../index.htm" /" TARGET="_top"><FONT COLOR="#0000FF"><b>Home</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<A HREF="index.htm" /forms/" ><font color="#FF0000"><b>Forms</b></font></A>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}">
<FONT COLOR="#006666"><b>Upload Filter</b></font></font>
<BR>
<BR>
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE="helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->
Allowing visitors to upload files through web forms on your site is useful, but how do you limit the types of files they can upload?  This script only allows visitors to upload files that end with the file extensions you want, such as .gif and .jpg, etc.  Easy!
<hr>
</td></tr>
</table>
<!-- Demonstration -->
<center>
Please upload only images that end in:  
<script>
document.write(extArray.join("  "));
</script>
<p>

<form method=post name=upform action="http://javascript.internet.com/cgi-bin/some-script.cgi" enctype="multipart/form-data">
<input type=file name=uploadfile>
<p>
<input type=button name="Submit" value="Submit" onclick="LimitAttach(this.form, this.form.uploadfile.value)">
</form>
</center>
<P>
<P>
<a name="source">
<table BORDER=0 WIDTH=486 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Forms:  Upload Filter</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Apple-s).  The script is yours!!!
<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  1.55 KB" size=24>
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL UPLOAD FILTER:

  1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  --&gt;

&lt;!-- STEP ONE: Paste this code into the HEAD of your HTML document  --&gt;

&lt;HEAD&gt;

&lt;SCRIPT LANGUAGE="JavaScript"&gt;
&lt;!-- Original:  ArjoGod, Shauna Merritt --&gt;
&lt;!-- Modified By:  Ronnie T. Moore, Editor --&gt;

&lt;! &gt;
&lt;! &gt;

&lt;!-- Begin
extArray = new Array(".gif", ".jpg", ".png");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i &lt; extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("Please only upload files that end in types:  " 
+ (extArray.join("  ")) + "\nPlease select a new "
+ "file to upload and submit again.");
}
//  End --&gt;
&lt;/script&gt;
&lt;/HEAD&gt;

&lt;!-- STEP TWO: Copy this code into the BODY of your HTML document  --&gt;

&lt;BODY&gt;

&lt;center&gt;
Please upload only images that end in:  
&lt;script&gt;
document.write(extArray.join("  "));
&lt;/script&gt;
&lt;p&gt;

&lt;form method=post name=upform action="/cgi-bin/some-script.cgi" enctype="multipart/form-data"&gt;
&lt;input type=file name=uploadfile&gt;
&lt;p&gt;
&lt;input type=button name="Submit" value="Submit" onclick="LimitAttach(this.form, this.form.uploadfile.value)"&gt;
&lt;/form&gt;
&lt;/center&gt;

 

&lt;!-- Script Size:  1.55 KB --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>
